// Vue
import { createApp, h, getCurrentInstance } from 'vue'
import App from '@/App'

// 配置
import Setting from '@/setting'

// 混合
import mixinApp from '@/mixins/app'

// 插件
import plugins from '@/plugins'

// store
import store from '@/store/index'

// ViewUIPlus
import ViewUIPlus from 'view-ui-plus'

// 全局组件
import gloCom from '@/components/gloCom'

// 菜单和路由
import router from '@/router'
import menuHeader from '@/menu/header'
import { frameInRoutes } from '@/router/routes'

// 多语言
import i18n from '@/i18n'
import { loadRemoteLocaleMessages } from '@/i18n/locale'
import { getHeaderName, getMenuSider, getSiderSubmenu } from "@/libs/system";
// 使用样式，修改主题可以在 styles 目录下创建新的主题包并修改 View UI Plus 默认的 less 变量
// 参考 https://www.iviewui.com/docs/guide/theme
import './styles/index.less'

// 第一次进入时，取菜单数据用于更新
let isFirstRouteChange = true

const app = createApp({
    mixins: [mixinApp],
    render: () => h(App),
    created () {
        // 处理路由 得到每一级的路由设置
        this.$store.commit('admin/page/init', frameInRoutes)
        // 设置顶栏菜单
        if (!Setting.dynamicMenu) this.$store.commit('admin/menu/setHeader', menuHeader)
        // 加载用户登录的数据
        this.$store.dispatch('admin/account/load')
        // 初始化全屏监听
        this.$store.dispatch('admin/layout/listenFullscreen')
        // 将根实例存全局，可在特殊场景下调用
        if (window) {
            window.$app = getCurrentInstance()
            window.$app.$t = i18n.global.t
        }
        // 加载远程 i18n
        if (Setting.i18n.remote) loadRemoteLocaleMessages(i18n)
        
    },
    watch: {
        // 监听路由 控制侧边栏显示 标记当前顶栏菜单（如需要）
        // $route(to, from) {
        //     let project = JSON.parse(localStorage.getItem('project'));
        //     let currentProject = JSON.parse(localStorage.getItem('currentProject'));
        //     let menus = JSON.parse(localStorage.getItem('menus'));


        //     if (!project || !currentProject || !menus) { // 项目or菜单存在
        //         if (from.path !== '/login' && to.path !== '/login') {
        //             router.push({
        //                 name: 'login',
        //             });
        //         } else {
        //             this.appRouteChange(to, from);
        //         }
        //     } else {
        //         const path = to.path;
        //         let menus;
        //         menus = JSON.parse(localStorage.getItem('menus'));
        //         const headerName = getHeaderName(path, menus.sider);
        //         let preHeadName = getHeaderName(from.path, menus.sider);
        //         this.$store.commit('admin/menu/setHeaderName', headerName);
        //         let filterMenuSider;
        //         if (to.path === '/userSetting') {
        //             filterMenuSider = getMenuSider(menus.sider, preHeadName);
        //         } else {
        //             filterMenuSider = getMenuSider(menus.sider, headerName);
        //         }
        //         this.$store.commit('admin/menu/setSider', filterMenuSider);
        //         this.$store.commit('admin/menu/setActivePath', path);
        //         const openNames = getSiderSubmenu(path, menus.sider);
        //         this.$store.commit('admin/menu/setOpenNames', openNames);
        //         this.appRouteChange(to, from);
        //     }
        // }

        '$route' (to, from) {
            this.$store.dispatch('admin/menu/setMenuList', to)
            if (Setting.dynamicMenu) {
                if (isFirstRouteChange) {
                    isFirstRouteChange = false
                    if (to.path !== "/login") {
                        let filterMenuSider;
                        const path = to.path;
                        let menus;
                         menus = JSON.parse(localStorage.getItem('menus'));
                        const headerName = getHeaderName(path, menus.sider);
                        let preHeadName = getHeaderName(from.path, menus.sider);
                        if (to.path === '/userSetting') {
                            filterMenuSider = getMenuSider(menus.sider, preHeadName);
                        } else {
                            filterMenuSider = getMenuSider(menus.sider, headerName);
                        }
                        this.$store.dispatch('admin/menu/getMenuList', to)
                    }
                }
            }

            this.appRouteChange(to, from)
        }
    }
})

app.use(router)
app.use(store)
app.use(i18n)
app.use(ViewUIPlus, {
    i18n
})
app.use(plugins)
app.use(gloCom)

app.directive('hasC', {
    // 当被绑定的元素挂载到 DOM 中时……
    mounted (el, binding) {
        if (binding.value) {
            let menus = JSON.parse(localStorage.getItem("menus"))
            let power = menus.action
            if (typeof binding.value == "string") {
                let flag = power.find((ee) => ee.flag === binding.value)
                if (!flag) el.style.display = "none"
            } else {
                let flag = power.find(
                    (ee) =>
                        ee.flag === binding.value.flag &&
                        ee.marking === binding.value.name
                )
                if (!flag) el.style.display = "none"
            }
        }
    }
})
app.mount('#app')
